<template>
	<view>
		<view>
			<!-- 轮播图 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="500">
				<!-- 由于接口图片失效，换成其他图片：gitee仓库 -->
				<!-- <swiper-item v-for="item in swiperData" :key="item.id">
					<view><image style="width: 100%;" :src="item.img"></image></view>
				</swiper-item> -->
				<swiper-item>
					<image class="img-lunbo" src="https://gitee.com/mrdai123/pic-go/raw/master/heima_swiper/1.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image class="img-lunbo" src="https://gitee.com/mrdai123/pic-go/raw/master/heima_swiper/2.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image class="img-lunbo" src="https://gitee.com/mrdai123/pic-go/raw/master/heima_swiper/3.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航 -->
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in navData" :key="index" @click="navigate(item.path)">
				<!-- <view :class="`iconfont icon-bg ${item.icon}`"></view> 这样写微信小程序报错 -->
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		
		<!-- 推荐 -->
		<view class="commend">
			<text class="commend-text">推&nbsp;&nbsp;&nbsp;荐&nbsp;&nbsp;&nbsp;商&nbsp;&nbsp;&nbsp;品</text>
			<commend-goods :commendGoods="commendGoods"></commend-goods>
		</view>
	</view>
</template>

<script>
	import commendGoods from '../../components/commendGoods.vue'
	export default {
		data() {
			return {
				// 轮播图数据
				swiperData: [],
				// 获取推荐商品数据页码
				number:1,
				// 保存推荐商品数据
				commendGoods:[],
				// 导航数据
				navData:[
					{
						title:'黑马超市',
						icon:'icon-chaoshi iconfont icon-bg',
						path:'/pages/goodsList/goodsList'
					},
					{
						title:'关于我们',
						icon:'icon-guanyuwomen iconfont icon-bg',
						path:'/pages/aboutUs/aboutUs'
					},
					{
						title:'社区图片',
						icon:'icon-tupian iconfont icon-bg',
						path:'/pages/communityImg/communityImg'
					},
					{
						title:'学习视频',
						icon:'icon-shipin iconfont icon-bg',
						path:'/pages/studyVideo/studyVideo'
					}
				]
			}
		},
		components:{commendGoods},
		onLoad() {
			// 获取轮播图数据
			// this.getSwiper();
			// 获取推荐商品数据
			this.getCommendGoods()
		},
		methods: {
			// 获取轮播图数据
			async getSwiper() {
				const res = await this.$myRequest({
					url: '/api/getlunbo',
					method: 'get'
				})
				// console.log(res.data.message)
				this.swiperData = res.data.message
			},
			// 获取推荐商品数据
			async getCommendGoods(){
				const res = await this.$myRequest({
					// url:`/api/getgoods?pageindex=${this.number}`,
					url:`/api/getgoods`,
					method:'get',
					data:{
						pageindex:this.number
					}
				})
				console.log(res)
				this.commendGoods = res.data.message
			},
			// 黑马超市跳转
			navigate(url){
				uni.navigateTo({
					// 绝对路径：pages.json中的路径
					// url:'/pages/goodsList/goodsList',
					// 相对路径
					// url:'../goodsList/goodsList'
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	swiper{
		width: 750rpx;
		height: 380rpx;
		.img-lunbo{
			width: 100%;
			height: 100%;
		}
	}
	.nav{
		display: flex;
		.nav-item{
			width: 25%;
			text-align: center;
			margin-bottom: 30rpx;
			.iconfont{
				font-size: 50rpx;
				color: #fff;
			}
			.icon-bg{
				width: 120rpx;
				line-height: 120rpx;
				background-color: #b50e03;
				border-radius: 50%;
				margin: 10px auto;
				margin-bottom: 20rpx;
			}
			text{
				font-size: 26rpx;
			}
		}
	}
	.commend {
		background-color: #eee;
		overflow: hidden;
	
		.commend-text {
			display: block;
			padding: 30rpx;
			text-align: center;
			color: #dd0e03;
			background-color: #fff;
			margin: 3px auto;
			// letter-spacing: 20px;
			// text-align: center;
		}
	}
</style>
